<template>
	<div id="main">
		<header class="headers">
			<div class="head clearfix">
				<div class="zuo fl">
					晴&emsp;金水区<img src="https://qq.weatherol.com/img/dayweatherHui/n55.png" style="width: 23px; height: 23px;" />优
				</div>
				<div class="you fr">
					<a href="/helper" class="Email">
						进入邮箱&nbsp;▽
						<div class="youxiang">
							<a href="#">VIP邮箱</a>
							<router-link to="/Tom" target="_blank">企业邮箱</router-link>
							<a href="#">免费邮箱</a>
						</div>
					</a>
					<!-- <a href="#">帮助中心</a> -->
					<router-link to="/helper" target="_blank">帮助中心</router-link>
					<a href="#" class="aboutme">关于我们
						<div class="xuke">
							<a href="#">广告服务<i class="fa fa-phone"></i>158-4444-5555</a>
							<a href="#">电信与信息服务业务经营许可证京ICP证 010287号</a>
							<a href="#">广播电视节目制作许可证（京）字第00713号</a>
							<a href="#">信息网络传播视听节目许可证号0105093号</a>
							<a href="#">网络出版社许可证（总）网出证（京）字083号</a>
							<a href="#">增值电信业务经营许可证B2-20090011号</a>
						</div>
					</a>

				</div>
			</div>
		</header>
		<!-- 最上面黑色条结束 -->
		<div id="navbox">
			<div class="nav">
				<div class="navlogo fl">
					<img src="https://www.tom.com/system/modules/my.opencms.news/resources/pc/pic/logotom.png">
				</div>
				<div class="navleft ">
					<div class="shouye fl">
						<!-- <a href="#">首页</a> -->
						<router-link to="/shouyepage">首页</router-link>
					</div>
					<div class="zixun fl">
						<a href="#">资讯</a>
					</div>
					<div class="shipin fl">
						<a href="#">视频</a>
					</div>
					<div class="liuxing fl">
						<a href="#">流行</a>
					</div>
				</div>
				<div class="navline"></div>
				<div class="navgroup">
					<div class="yule"><a href="#">娱乐</a></div>
					<div class="mingxing"><a href="#">明星</a></div>
					<div class="shishang"><a href="#">时尚</a></div>
					<div class="tiyu"><a href="#">体育</a></div>
					<div class="qiche"><a href="#">汽车</a></div>
					<div class="youxi"><a href="#">游戏</a></div>
				</div>
				<div class="navline"></div>
				<div class="navgroup">
					<div class="yule"><a href="#">旅游</a></div>
					<div class="mingxing"><a href="#">生活</a></div>
					<div class="shishang"><a href="#">母婴</a></div>
					<div class="tiyu"><a href="#">健康</a></div>
					<div class="qiche"><a href="#">财经</a></div>
					<div class="youxi"><a href="#">段子</a></div>
				</div>
				<div class="navline"></div>
				<div class="navgroup">
					<div class="yule"><a href="#">商业</a></div>
					<div class="mingxing">
						<router-link to="/Home" target="_blank">营销</router-link>
					</div>
					<div class="shishang">
						<router-link to="Home1" target="_blank">消费</router-link>
					</div>
					<div class="tiyu"><a href="#">邮箱</a></div>
					<div class="qiche">
						<router-link to="Home1" target="_blank">购物</router-link>
					</div>
					<div class="youxi"><a href="#">科技</a></div>
				</div>
			</div>
		</div>
		<shouyepage></shouyepage>
		<shouyefoot></shouyefoot>

	</div>
</template>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script setup lang="ts">
	import shouyefoot from "./shouyefoot.vue" //首页底部页面
	import shouyepage from "./shouyepage.vue" //首页内容页面
	export default {
		name: "shouye",
		data() {
			return {

			};
		},
		methods: {

		},
		
		components: {
			shouyefoot,
			shouyepage
		},
	};
</script>

<style scoped="scoped">
	@import url("../assets/css/reset.css");
	/* @import url("../assets/css/shouye.css"); */
	/* 引入字体图标 */
	@import url("../assets/css/font-awesome.min.css");

	#main {
		width: 100%;
	}

	header {
		width: 100%;
		background-color: #333;
		font: initial;
		position: fixed;
		top: 0;
		z-index: 99;
		opacity: 1;
		color: #fff;
	}

	header .head {
		width: 1200px;
		margin: 0 auto;
		height: 44px;
		line-height: 44px;
	}

	header.zuo {
		text-align: center;
		align-items: center;
		justify-content: center;
		display: flex;
		width: 290px;
		font-size: 24px;
	}

	header.zuo img {
		width: 23px;
		height: 23px;
		margin-top: 5px;
	}

	header .you a {
		display: inline-block;
		width: 122px;
		height: 44px;
		color: white;
		text-align: center;
	}

	header .you .Email {
		width: 120px;
		position: relative;
	}

	header .you .Email .youxiang {
		position: absolute;
		background-color: #fff;
		width: 120px;
		display: none;
		box-shadow: 0 3px 7px 0 #7f7f7f;
		border-radius: 6px;

	}

	header .you .Email .youxiang>a {
		display: block;
		color: red;
	}

	header .you .Email .youxiang>a:hover {
		background-color: aqua;
	}

	header .you .Email:hover .youxiang {
		display: block;
	}

	header .you .aboutme {
		background-color: green;
		display: inline-block;
		position: relative;
	}

	header .you .aboutme .xuke {
		width: 540px;
		position: absolute;
		top: 44px;
		left: -300px;
		background-color: white;
		border: 1px solid #eaeaea;
		display: none;
		text-align: left;

	}

	header .you .aboutme .xuke a {
		display: list-item;
		color: #333 !important;
		font-size: 14px;
		line-height: 37px;
		width: 100%;
		height: 37px;
		padding: 0 15px;
		margin-bottom: 2px;
		box-sizing: border-box;
	}

	header .you .aboutme:hover .xuke {
		display: block;
	}

	header .you .aboutme .xuke a:hover {
		color: #fff !important;
		background-color: #cacaca;
	}

	/* 黑色条结束 */
	#navbox {
		width: 100%;
		background-color: #fff;
		border-bottom: solid 1px #edefed;
		position: fixed;
		margin-bottom: 13px;
		top: 43px;
		z-index: 88;
		opacity: 1;
	}

	#navbox .nav {
		font-size: 16px;
		height: 78px;
		background-color: #fff;
		overflow: hidden;
		margin: auto;
		width: 1200px;
		margin-top: 20px;

	}

	#navbox .nav a {
		color: #222222;
	}

	#navbox .nav .navlogo {
		padding-top: 13px;
		margin-left: 5px;
	}

	#navbox .nav .navlogo img {
		width: 129px;
		margin-top: -10px
	}

	#navbox .nav .navleft {
		margin-left: 55px;
		margin-right: 40px;
		float: left;
		display: block;
		width: 116px;
	}

	#navbox .nav .navleft .shouye {
		padding-left: 8px;
		padding-right: 8px;
		background-color: #288055;
		color: white !important;
		border-radius: 5px;
		float: left;
		margin-top: -4px;
		margin-left: -8px;
		margin-right: 42px;
		padding-top: 4px;
		padding-bottom: 4px;
	}

	#navbox .nav .navleft .shouye a {
		color: white;
	}

	#navbox .nav .navleft .zixun {
		margin-bottom: 15px;
	}

	#navbox .nav .navleft .shipin {
		margin-right: 50px;
		margin-bottom: 15px;
	}

	#navbox .nav .navleft .liuxing {
		margin-bottom: 15px;
	}

	#navbox .nav .navline {
		float: left;
		width: 1px;
		height: 54px;
		background-image: Url(//www.tom.com/system/modules/my.opencms.news/resources/pc/pic/line_1.png);
	}

	#navbox .nav .navgroup {
		margin-left: 40px;
		margin-right: 40px;
		float: left;
		width: 199px;
		display: block;
	}

	#navbox .nav .navgroup .yule {
		margin-right: 50px;
		float: left;
		margin-bottom: 15px;
	}

	#navbox .nav .navgroup .mingxing {
		margin-right: 50px;
		float: left;
		margin-bottom: 15px;
	}

	#navbox .nav .navgroup .shishang {
		float: left;
		margin-bottom: 15px;
	}

	#navbox .nav .navgroup .tiyu {
		margin-right: 50px;
		float: left;
		margin-bottom: 15px;
	}

	#navbox .nav .navgroup .qiche {
		margin-right: 50px;
		float: left;
		margin-bottom: 15px;
	}

	#navbox .nav .navgroup .youxi {
		float: left;
		margin-bottom: 15px;
	}
</style>
